<template>
        <SetupOnMounted msg="Welcome to use setup and onMounted"/>
    <!--    <RefCom msg="I am ref props"></RefCom>-->
    <!--    <WatchCom/>-->
    <!--    <SetupCom title="I am setup title"/>-->
    <!--    <ProvideInject/>-->
<!--    <ReferenceCom/>-->
<!--    <TelePort/>-->
</template>

<script>
  import {provide, ref, reactive} from 'vue'

  import SetupOnMounted from './components/01.setup和onMounted的使用'
  import RefCom from './components/02.ref组件选项'
  import WatchCom from './components/03.watch响应式'
  import SetupCom from './components/04.setup函数'
  import ProvideInject from './components/05.provide和inject'
  import ReferenceCom from './components/06.模板引用'
  import TelePort from './components/07.TelePort的使用'


  export default {
    name: 'App',
    components: {
      SetupOnMounted,
      RefCom,
      WatchCom,
      SetupCom,
      ProvideInject,
      ReferenceCom,
      TelePort
    },

    setup() {
      /**
       * Provide 函数允许你通过两个参数定义 属性
       *  1. name 字符串类型
       *  2. value 你要定义的值
       */
      const location = ref('North Pole')
      const geolocation = reactive({
        longitude: 90,
        latitude: 135
      })
      provide('location', location)
      provide('geolocation', geolocation)
    }
  }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
